<template>
  <div class="min-h-screen bg-gray-50">
  

    <!-- 上方空白区域 -->
    <div class="h-8 bg-white"></div>
   
    <!-- 平台介绍区域 -->
    <div class="py-10 bg-white">
      <div class="container mx-auto px-6">
        <div class="max-w-none mx-auto">
          <h2 class="text-4xl font-bold mb-4 text-gray-900">智能教育新时代</h2>
          <p class="text-base text-gray-600 mb-4 leading-relaxed max-w-2xl">
            打造个性化学习体验，让每个学生都能找到最适合自己的学习方式
          </p>
          <div class="flex gap-3">
                          <el-button type="primary" size="default" class="rounded-lg px-6 py-2 text-sm font-medium" @click="startLearning">
                开始学习
              </el-button>
              <el-button size="default" class="rounded-lg px-6 py-2 text-sm font-medium bg-white border-2 border-gray-300 hover:border-blue-500 hover:text-blue-600" @click="viewCourses">
                浏览课程
              </el-button>
          </div>
        </div>
      </div>
    </div>

    <!-- 下方空白区域 -->
    <div class="h-6 bg-white"></div>

    <!-- 特色课程 -->
    <div class="py-8 bg-gray-50">
      <div class="container mx-auto px-6">
        <h2 class="text-2xl font-bold text-center mb-6 text-gray-900">精选好课</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-none mx-auto px-2">
          <div v-for="course in courses" :key="course.id" class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
            <div class="h-44 overflow-hidden">
              <img :src="course.image" :alt="course.title" class="w-full h-full object-cover"/>
            </div>
            <div class="p-5">
              <h3 class="text-xl font-bold mb-3 text-gray-900">{{ course.title }}</h3>
              <p class="text-base text-gray-600 mb-4 leading-relaxed">{{ course.description }}</p>
              <div class="flex items-center justify-between">
                <span class="text-2xl font-bold text-blue-600">¥{{ course.price }}</span>
                <el-button type="primary" size="default" class="rounded-lg px-5 py-2 text-sm font-medium" @click="goToCourseSeries(course.id)">立即体验</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 区域间隔 -->
    <div class="h-6"></div>

    <!-- 学习数据 -->
    <div class="py-8 bg-gray-50">
      <div class="container mx-auto px-6">
        <h2 class="text-2xl font-bold text-center mb-4 text-gray-900">平台数据</h2>
        <div class="grid grid-cols-2 md:grid-cols-4 gap-8 max-w-none mx-auto px-2">
          <div v-for="stat in stats" :key="stat.label" class="text-center py-1">
            <div class="text-4xl font-bold text-blue-600 mb-3">{{ stat.value }}</div>
            <div class="text-base text-gray-600 font-medium">{{ stat.label }}</div>
          </div>
        </div>
      </div>
    </div>

    <!-- 区域间隔 -->
    <div class="h-6"></div>

    <!-- 热门直播班级（替换原学习路径） -->
    <div class="py-8 bg-white">
      <div class="container mx-auto px-6">
        <h2 class="text-2xl font-bold text-center mb-4 text-gray-900">热门直播班级</h2>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 max-w-none mx-auto px-2">
          <div v-for="clazz in hotClasses" :key="clazz.id"
               class="p-6 bg-white rounded-xl shadow-lg border border-gray-100 hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 cursor-pointer"
               @click="goToClassIntro(clazz.id)">
            <div class="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center mb-4">
              <span class="text-2xl">{{ clazz.icon }}</span>
            </div>
            <h3 class="text-xl font-bold mb-2 text-gray-900">{{ clazz.title }}</h3>
            <p class="text-base text-gray-600 mb-3 leading-relaxed">{{ clazz.brief }}</p>
            <div class="flex items-center justify-between">
              <span class="text-sm text-gray-500">{{ clazz.dateRange }}</span>
              <el-button size="small" type="primary" class="rounded-lg">查看班级</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 区域间隔 -->
    <div class="h-6"></div>

    <!-- 讲师团队 -->
    <div class="py-8 bg-gray-50">
      <div class="container mx-auto px-6">
        <h2 class="text-2xl font-bold text-center mb-4 text-gray-900">优秀讲师</h2>
        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 gap-6 max-w-none mx-auto px-2">
          <div v-for="expert in experts" :key="expert.id" 
               class="bg-white rounded-xl shadow-lg border border-gray-100 overflow-hidden hover:shadow-xl transition-all duration-300 transform hover:-translate-y-2">
            <div class="h-48 overflow-hidden bg-gray-200">
              <img :src="expert.image" :alt="expert.name" class="w-full h-full object-cover"/>
            </div>
            <div class="p-6 text-center">
              <h3 class="font-bold mb-2 text-gray-900 text-xl">{{ expert.name }}</h3>
              <p class="text-base text-gray-600">{{ expert.title }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>
 </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { Monitor, Reading, DataLine } from '@element-plus/icons-vue'

const router = useRouter()

const startLearning = () => {
  router.push('/study')
}

const viewCourses = () => {
  router.push('/courses')
}

const goToClassIntro = (classId) => {
  router.push(`/classes/${classId}/intro`)
}

const goToCourseSeries = (courseId) => {
  router.push(`/courses/${courseId}/series`)
}

// 课程数据
const courses = ref([
  {
    id: 1,
    title: '人工智能基础课程',
    description: '从零开始学习AI基础知识，掌握机器学习核心概念',
    price: 599,
    image: 'https://ai-public.mastergo.com/ai/img_res/9b79b687a414cbc04df14a5239cc97cd.jpg'
  },
  {
    id: 2,
    title: '数据分析实战',
    description: '使用Python进行数据分析，掌握数据可视化技能',
    price: 699,
    image: 'https://ai-public.mastergo.com/ai/img_res/8ec7a9ec6d4e0d8412053d1470d9ec82.jpg'
  },
  {
    id: 3,
    title: '前端开发进阶',
    description: '深入学习现代前端框架，构建响应式应用',
    price: 899,
    image: 'https://ai-public.mastergo.com/ai/img_res/8a14720d65c0196f4f8d4eed7780109d.jpg'
  }
]);

const stats = [
  { label: '注册学员', value: '100,000+' },
  { label: '精品课程', value: '500+' },
  { label: '专业讲师', value: '200+' },
  { label: '学习路径', value: '50+' }
];

const learningPaths = [
  {
    id: 1,
    title: '人工智能工程师',
    description: '系统学习AI算法、深度学习、计算机视觉等核心技术',
    icon: Monitor
  },
  {
    id: 2,
    title: '全栈开发工程师',
    description: '掌握前后端开发技术，构建完整的Web应用系统',
    icon: Reading
  },
  {
    id: 3,
    title: '数据分析师',
    description: '学习数据处理、统计分析、数据可视化等专业技能',
    icon: DataLine
  }
];

const experts = [
  {
    id: 1,
    name: '张教授',
    title: '人工智能首席专家',
    description: '专注于AI算法和深度学习领域，拥有丰富的教学经验。',
    image: 'https://ai-public.mastergo.com/ai/img_res/42b73570af591e59e48f27f571f02bae.jpg'
  },
  {
    id: 2,
    name: '李博士',
    title: '数据科学专家',
    description: '在数据分析、机器学习、大数据处理方面有深入研究。',
    image: 'https://ai-public.mastergo.com/ai/img_res/69a52685db36bf900e3d52d8459ca7c4.jpg'
  },
  {
    id: 3,
    name: '王工程师',
    title: '全栈开发专家',
    description: '精通前端、后端开发，致力于打造高效稳定的应用系统。',
    image: 'https://ai-public.mastergo.com/ai/img_res/ddf82b6f467545c250ac10b63cda4100.jpg'
  },
  {
    id: 4,
    name: '陈博士',
    title: '机器学习专家',
    description: '在自然语言处理、计算机视觉等领域有丰富的研究经验。',
    image: 'https://ai-public.mastergo.com/ai/img_res/db0c751950e500ff9af63e4d56ce469d.jpg'
  }
];

// 首页热门直播班级
const hotClasses = [
  { id: 2, title: 'Python直播班级（2025春）', brief: 'Python数据分析入门到实战，含作业点评与答疑', dateRange: '2025-03 ~ 2025-06', icon: '🐍' },
  { id: 11, title: 'AI工程师直播班（2025秋）', brief: '深度学习与大模型工程落地，模型微调/部署', dateRange: '2025-09 ~ 2025-12', icon: '🤖' },
  { id: 9, title: '前端工程化直播班（2025夏）', brief: '现代前端工程化实践：Vite/Webpack、CI/CD、性能优化', dateRange: '2025-06 ~ 2025-08', icon: '🧩' }
]

// 方法
const openSocial = (platform) => {
  switch (platform) {
    case 'email':
      window.location.href = 'mailto:service@edulivelink.com'
      break
    case 'wechat':
      ElMessage.info('请扫描二维码关注我们的微信公众号')
      break
    case 'weibo':
      ElMessage.info('请关注我们的官方微博')
      break
  }
}
</script>

<style scoped>
.el-input {
  --el-input-bg-color: #f3f4f6;
  --el-input-border-color: transparent;
  --el-input-hover-border-color: #e5e7eb;
  --el-input-focus-border-color: #3b82f6;
}

.el-button--primary {
  --el-button-bg-color: #3b82f6;
  --el-button-border-color: #3b82f6;
  --el-button-hover-bg-color: #2563eb;
  --el-button-hover-border-color: #2563eb;
}

.rounded-lg {
  border-radius: 0.5rem;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-shadow {
  transition-property: box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.hover\:shadow-lg:hover {
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.hover\:text-blue-400:hover {
  color: #60a5fa;
}

.cursor-pointer {
  cursor: pointer;
}
</style>
